<template>
  <div class="app-layout">
    <header class="app-header">
      <!-- Add header content here -->
    </header>
    <div class="app-content" style="position: relative; height: calc(100vh - 50px);">
      <div class="main-content" :style="{
        width: isDrawerOpen ? 'calc(100% - 252px)' : 'calc(100% - 52px)',
        height: '100%',
        overflow: 'hidden',
        transition: 'width 0.3s ease'
      }">
        <TVChartContainer :symbol="currentSymbol" />
      </div>
      <div class="watchlist-drawer" :style="{
        position: 'absolute',
        top: '42px',
        right: 0,
        width: isDrawerOpen ? '200px' : '52px',
        height: '100%',
        boxShadow: '-2px 0 5px rgba(0,0,0,0.1)',
        background: 'white',
        transition: 'width 0.3s ease'
      }">
        <RightToolBar :currentSymbol="currentSymbol" @symbol-selected="handleSymbolSelected"
          @drawer-toggle="handleDrawerToggle" />
      </div>
    </div>
  </div>
</template>

<script>
import TVChartContainer from './components/TVChartContainer.vue'
import RightToolBar from './components/RightToolBar.vue'

export default {
  name: 'App',
  components: {
    TVChartContainer,
    RightToolBar
  },
  data() {
    return {
      currentSymbol: '',
      isDrawerOpen: false
    }
  },
  methods: {
    handleSymbolSelected(symbol) {
      console.log('[App] handleSymbolSelected called with:', symbol)
      this.currentSymbol = symbol
      console.log('[App] currentSymbol updated to:', this.currentSymbol)
    },
    handleDrawerToggle(isOpen) {
      this.isDrawerOpen = isOpen
    }
  }
}
</script>

<style>
.app-layout {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.app-header {
  height: 50px;
  background: #ffffff;
  border-bottom: 1px solid #e0e3eb;
}

.app-content {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
}

.main-content {
  height: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: #ffffff;
  color: #131722;
}

#app {
  height: 100vh;
  width: 100vw;
}
</style>
